<script setup lang="ts" name="App">
// JS 或者 TS
import HelloWorld from './components/HelloWorld.vue'
import Person from './components/Person.vue'
import Car from './components/Car.vue'
import PersonRef from './components/PersonRef.vue'
import PersonForm from './components/PersonForm.vue'
import Watch_person from './components/Watch_person.vue'
import RefTag from './components/RefTag.vue'
import Types_interaface from './components/Types_interaface.vue'
import Props from './components/props.vue'
// 通过 defineProps 定义组件接收的 props 表示这个组件会接受的数据类型，一旦有一个组件引用了个该组件就需要传入对
import { type Persons } from './types/types'
import { reactive } from 'vue'
import Picture  from './components/Picture.vue'
// 路由 
import { RouterView } from 'vue-router'
import Input from './components/Input.vue'


let personList = reactive<Persons>([
  {
    name: '张三',
    age: 18,
    address: '男',
    email: '123@qq.com',
  },
  {
    name: '李四',
    age: 19,
    address: '女',
  },
  {
    name: '王五',
    age: 20,
    address: '男',
  },
])
</script>


<template>
  <!-- html结构 -->
  <div>
  <header/>
    <a href="https://vite.dev" target="_blank">
      <!-- logo css 样式， alt但图片无法加载的时候显示该文字 -->
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <!-- class这里不能有 . 字节空格代替 -->
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>

    <div class = "navigate">
      <RouterLink replace to="/home" active-class="active"> 首页 </RouterLink>
      <RouterLink replace :to="{name: 'News'}" active-class="active"> 新闻 </RouterLink>
      <RouterLink replace :to="{ path: '/about' }" active-class="active"> 关于 </RouterLink>
    </div>
    <div class="展示区">
    <!-- 路由出口 -->
    <RouterView>  </RouterView>
    </div>
    
  </div>

  <HelloWorld msg="通过引入组件实现功能", data="data shuju " />
  <Person />
  <Car />
  <PersonRef />
  <PersonForm />
  <Watch_person />
  <RefTag />
  <Types_interaface />
  <Props :list = 'personList'/>
  <Picture />
  <Input />
</template>



<style scoped>
/* scoped 样式是局部的 */
/* 样式 */
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
/*  默认的样式 */
.logo:hover {
  filter: drop-shadow(0 0 2em #d4d643aa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #b2ec45aa);
}
.navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
}

.navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: gray;
    text-decoration: none;
    color: white;
    font-size: 18px;
    letter-spacing: 5px;
}

.navigate a.active {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: rgb(38, 150, 98);
    text-decoration: none;
    color: rgb(159, 202, 175);
    font-size: 18px;
    letter-spacing: 5px;
}

</style>
